<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="ztree/zTreeStyle.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js" ></script>
<script>
$(function(){
	window.zTreeJson =  [{"id":0,"pId":-1,"name":"后台系统管理树形菜单", "open":true},
					  {"id":1,"pId":0,"name":"系统管理"},
	                  {"id":2,"pId":1,"name":"菜单管理","myUrl":"privilege"},
	                  {"id":3,"pId":1,"name":"用户管理","myUrl":"user"},
	                  {"id":4,"pId":1,"name":"角色管理","myUrl":"role"},
	                  {"id":5,"pId":0,"name":"系统监控","myUrl":""},
	                  {"id":6,"pId":5,"name":"服务器监控","myUrl":"monitoring"},
	                  {"id":7,"pId":5,"name":"数据库连接池监控","myUrl":"druid"},
	                  {"id":8,"pId":0,"name":"其他功能模块","myUrl":""},
	                  {"id":9,"pId":8,"name":"邮件模块","myUrl":"email"},
	                  {"id":10,"pId":0,"name":"系统报表","myUrl":""},
	                  {"id":11,"pId":10,"name":"角色用户分布图","myUrl":"report/ur"}
                  ];
	window.zTree_def_setting = {
				data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pId",
						rootPId: -1
					}
				},
				callback: {
					onDblClick: function zTreeOnDblClick(event, treeId, treeNode) {
						var treeObj = $.fn.zTree.getZTreeObj(treeId);
						var nodes = treeObj.getNodesByParam("id", treeNode.pId, null);

						$("#e_pid").val(treeNode.pId + "|" + nodes[0].name);
						$("#e_name").val(treeNode.name);
						$("#e_url").val(treeNode.myUrl);
						$("#e_remark").val(treeNode.remark);
					    //alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
					}
				}
		}
	window.zTreeObj = $.fn.zTree.init($("#zTree"), zTree_def_setting, zTreeJson);
})

function addPrivilege(){
	var pid = $("#e_pid").val();
	if(pid == ""){
		pid=0;
	}
	var name = $("#e_name").val();
	var myUrl = $("#e_url").val();
	var state = 1;
	if($("#e_state").is(":checked")){
		state = 0;
	}
	var remark = $("#e_remark").val();
}
</script>
</head>
<body>
<div style="width: 800px; border: 1px solid #CCC; margin: 0 auto;">
	<div style="width: 239px; border-right: 1px solid #CCC; float: left;">
		<div id="zTree" class="ztree" style="width: 230px; height: 400px; overflow: auto;"></div>
	</div>
	<div style="padding-right: 10px; float: left; border-right: 1px solid #CCC;">
		<div>
			<ul>
				<li>
					菜单名称:<input type="text" name="e_name" id="e_name" />
				</li>
				<li>
					父类菜单:<input type="text" name="e_pid" id="e_pid" />
				</li>
				<li>
					菜单映射:<input type="text" name="e_url" id="e_url" />
				</li>
				<li>
					不可删除:<input type="checkbox" id="e_state" />
				</li>
				<li>
					菜单描述:<br/>
					<textarea id="e_remark" style="width: 200px; height: 100px; resize: none;">
					</textarea>
				</li>
			</ul>
		</div>
	</div>
	<div style="width: 240px; float: left;">
		<div style="margin-left: 20px; margin-top: 40px;">
			<input type="button" value="添加新节点" style="width: 100px; height: 30px;" onclick="addPrivilege();" />
			<br /><br /><br /><br />
			<input type="button" value="确定修改" style="width: 100px; height: 30px;" onclick="editPrivilege();" />
		</div>
	</div>
	<div style="clear: both;"></div>
</div>
</body>
</html>
